<!DOCTYPE html>
<html lang="en">
<head>
  <script>
    document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';
  </script>
  <meta charset="UTF-8">
  <title>某一个设备系列统计(设备列表)</title>
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <link href="../../css/mui.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="../../css/timeChoose.css" />
  <!--<link rel="stylesheet" href="../css/timecheck.css" />-->
  <link rel="stylesheet" href="../../fonts/iconfont.css" />

  <script>
    var width =window.localStorage.getItem('width');
    document.documentElement.style.fontSize =  width ? width/6.4+  'px' :'55px';
  </script>


  <style>
    #app{
      width: 100%;
      margin-bottom: 0.3rem;
    }
    div p {
      margin: 0;
      padding: 0;
    }
    .deviceDiv p{
      color:black;
    }
    .deviceTitle{
      width: 100%;
      padding: 0.2rem;
      background-color: white;
      overflow: hidden;
      margin-top: 0.7rem;
    }
    .deviceTitle>div{
      float: left;
    }
    .imgDiv{
      width: 25%;
    }
    .imgDiv img{
      width: 100%;
    }
    .deviceInfo{
      width: 60%;
      margin: 0 0 0 0.2rem;
    }
    .deviceInfo p{
      margin: 0 0 0.04rem;
      font-size:0.24rem
    }
    .lineDiv{
      margin-top: 0.1rem;
      background-color: white;
    }
    .deviceListDiv{
      width: 100%;
      overflow: hidden;
      margin-bottom: 0.8rem;

    }
    .deviceListDiv .device p{
      color: rgba(0, 0, 0, 0.71);
      font-size: 0.22rem;
    }
    .device{
      width: 94%;
      margin: 0.15rem auto 0;
      padding: 0.1rem 0 0.2rem;
      border-radius: 0.1rem;
      background-color: rgba(204, 204, 204, 0.61);
      overflow: hidden;
    }
    .deviceName{
      width: 100%;
      padding: 0.15rem  0 0.05rem 0.1rem;
      border-bottom: 1px solid rgba(0, 0, 0, 0.56);
    }
    .info{
      width: 100%;
      /*text-align: center;*/
      margin : 0.2rem 0 0 0;
      padding: 0 0.2rem;
      overflow: hidden;
    }
    .info p{
      margin-bottom: 0.05rem;

    }
    .leftDiv{
      float: left;
      width: 40%;
    }
    .rightDiv{
      width: 60%;
      float: right;
      text-align: center;
    }
    .floatRight{
      float: right;
    }
    .floatLeft{
      float: left;
    }
    .floatLeft , .floatRight{
      width: 31%;
      text-align: center;
    }
    .storeChoose{
      width: 85%;
      margin: 0.2rem auto 0.2rem;
      border: 1px solid #ccc;
      font-size: 0.22rem;
      text-align: center;
      background-color: white;
      overflow: hidden;
    }
    .storeChoose span{
      display: inline-block;
      width: 50%;
      float: left;
      padding: 0.06rem 0;
      font-size: 0.22rem;
    }
    .storeChoose .default{
      background-color: #ccc;
    }
  </style>
</head>
<body>
<script src="../../js/echarts.common.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../config.js" type="text/javascript" charset="utf-8"></script>
<script src="../../js/mui.min.js"></script>
<script src="../../common/timeChoose.js" type="text/javascript" charset="utf-8"></script>
<div id="app" class="mui-content deviceDiv">
  <time-choose :datetype="dateType" :todate="toDate" :fromdate="fromDate"></time-choose>

  <div class="deviceTitle">
    <div class="imgDiv">
      <img src="../../images/head-min.jpg" alt="">
    </div>
    <div class="deviceInfo">
      <p> <span style="font-size: 0.26rem"> <strong>{{originalData.series}}</strong> </span> <span style="display: inline-block;float: right;margin-right: 0.2rem">{{originalData.number}}台</span> </p>
      <p>
        总收G币：{{originalData.coin !=='--' ? originalData.coin + '枚' : originalData.coin }}
        <span style="display: inline-block;float: right;margin-right: 0.2rem">{{originalData.money !== '--' ? originalData.money+'元' : originalData.money}}</span>
      </p>
      <p v-show="deviceType === 1">总返奖：{{originalData.awardNumber}}
        <span style="display: inline-block;float: right;margin-right: 0.2rem">{{originalData.awardMoney !=='--' ? originalData.awardMoney +'元' : originalData.awardMoney}}</span>
      </p>
      <p v-show="deviceType === 1">总返奖率： <span style="float: right;margin-right: 0.2rem">{{originalData.awardRate !=='--' ? originalData.awardRate+'%' :'--' }}</span></p>
      <p v-show="deviceType !== 1">总出票：{{originalData.ticketNumber}}    <span style="display: inline-block;float: right;margin-right: 0.2rem">{{originalData.ticketMoney}}元</span> </p>
      <p v-show="deviceType !== 1">总出票率：<span style="float: right;margin-right: 0.2rem">{{originalData.ticketRate}}张/G币</span></p>
    </div>
  </div>

  <div class="storeChoose">
    <span @click="choose(1)" :class="{default:type ===1 }">{{(dateType === 0 ? '近30日' : dateType === 1 ? '近12周' : '近12个月')}}平均单台收G币</span>
    <span @click="choose(2)" :class="{default:type ===2 }" v-show="deviceType === 1">{{(dateType === 0 ? '近30日' : dateType === 1 ? '近12周' : '近12个月')}}平均返奖率</span>
    <span @click="choose(2)" :class="{default:type ===2 }" v-show="deviceType !== 1">{{(dateType === 0 ? '近30日' : dateType === 1 ? '近12周' : '近12个月')}}平均出票率</span>
  </div>
  <!--折线图 start-->
  <div style="width: 100%;background-color: white">
    <div id="lineChart" style="width: 100%;height: 4.2rem"></div>
  </div>
  <!--折线图 end-->
  <!--设备列表 start-->
  <div class="deviceListDiv">
    <div class="device"  @click="toPage(index)"  v-for="(item,index) in deviceList" style="position: relative">
      <img v-show="deviceType ===1" style="width: 0.25rem; position:relative;top:0.15rem; left:-0.05rem;float: left;margin-left: 0.2rem" src="../../images/liping.png" alt="">
      <img v-show="deviceType ===2" style="width: 0.3rem; position:relative;top:0.15rem; left:-0.05rem;float: left;margin-left: 0.2rem"  src="../../images/game1.png" alt="">
      <img v-show="deviceType ===3" style="width: 0.3rem; position:relative;top:0.15rem; left:-0.05rem;float: left;margin-left: 0.2rem"  src="../../images/caipiao.png" alt="">
      <p class="deviceName">{{item.deviceName}}</p>
      <img v-show="item.deviceState ===1&&dateType===0" src="../../images/troubleflag-green.png" alt="" style="width: 0.25rem;position: absolute;top:0.3rem;right: 0.2rem;"/>
      <img v-show="(item.deviceState === 2||item.deviceState === 3||item.deviceState === 4)&&dateType===0" src="../../images/troubleflag-red.png" alt="" style="width: 0.25rem;position: absolute;top:0.3rem;right: 0.2rem;"/>
      <img v-show="item.deviceState ===5&&dateType===0" src="../../images/troubleflag-gray.png" alt="" style="width: 0.25rem;position: absolute;top:0.3rem;right: 0.2rem;"/>
      <img v-show="item.deviceState ===6&&dateType===0" src="../../images/troubleflag-gray2.png" alt="" style="width: 0.25rem;position: absolute;top:0.3rem;right: 0.2rem;"/>
      <div class="info">
        <div class="leftDiv">
          <p>收G币：{{item.deviceCoin !== '--' ? item.deviceCoin + '枚' : item.deviceCoin}} </p>
          <p v-show="deviceType === 1">返奖：{{item.awardNumber !=='--'? item.awardNumber +'个' : item.awardNumber}} </p>
          <p v-show="deviceType !== 1">出票：{{item.tikectNumber !=='--' ? item.tikectNumber +'张' : item.tikectNumber}}</p>
        </div>
        <div class="rightDiv">
          <div v-show="deviceType === 1" class="floatLeft" style="margin-left: 0.1rem">
            <p>返奖单价 </p>
            <p>{{item.awardMoney}}</p>
          </div>
          <div v-show="deviceType === 1" class="floatLeft" style="margin-left: 0.1rem">
            <p>返奖局 </p>
            <p>{{ item.award !== '--' ?  Math.round(item.award) : '--'  }}</p>
          </div>
          <div  class="floatRight">
            <p v-show="deviceType === 1">返奖率</p>
            <p v-show="deviceType !== 1">出票率</p>
            <p v-show="deviceType === 1">{{item.awardRate !== '--' ? item.awardRate +'%' : item.awardRate  }}</p>
            <p v-show="deviceType !== 1">{{item.tikectRate!=='--' ? item.tikectRate+'张/G币' : item.tikectRate}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--设备列表 end-->
</div>
<script type="text/javascript">
  mui.init()
  var vm = new Vue({
    el: '#app',
    data: function() {
      return {
        lineOptions:{
          //标题，
          title: {
            subtext: '30天总收G币趋势图',
            left: 'center',
            textStyle: {
              fontSize: 20,
              fontWeight: 500
            }
          },
          tooltip: {
            trigger: 'axis',    //item 饼图触发  axis线性图触发
            textStyle: {
              fontSize: 12
            }
          },
          legend: {
            data: ['乌龟（大）','门店平均线',],
            show: true,
            bottom:10
          },
          feature: {
            dataView: {
              show: true,
              readOnly: false
            }
          },
          calculable: true,
          grid: {
            left: '2%',
            right: '5%',
            bottom: '14%',
            top: '20%',
            containLabel: true,
            borderColor: '#e2e2e2'
          },
          xAxis: [
            {
              type: 'category',
              splitLine: {
                show: false
              },
              data: [],
              axisLabel: {
                interval:2,
                textStyle: {
                  color: '#868686',
                  fontSize: '8px'
                }
              }
            }
          ],
          yAxis: [
            {
//                  name:'销售额',
              type: 'value',
              nameLocation: 'end',
              max: 100,
              splitLine: {
                show:true,
                lineStyle: {
                  // 使用深浅的间隔色  
                  color: ['#b1b1b1'],
                  type:'dotted'
                }
              },
              axisLabel: {
                textStyle: {
                  color: '#868686',
                  fontSize: '8px'
                }
              }
            },
          ],

          series: [
            {
              name: '乌龟（大）',
              type: 'bar',
              yAxisIndex: 0,
              data:['0','20','30'],
              itemStyle: {
                normal: {
                  color: '#4472C4',        // 控制例子线条的style
                  lineStyle: {
                    color: '#4472C4'      //  lineStyle 控制对应线条style
                  }
                }
              },
            },
            {
              name: '门店平均线',
              type: 'line',
              data:[0,30,80],
              yAxisIndex: 0,
              itemStyle: {
                normal: {
                  color: '#ccc ',        // 控制例子线条的style
                  lineStyle: {
                    color: '#ccc'      //  lineStyle 控制对应线条style
                  }
                }
              },
            },

          ]
        },
        currentShopObj:'',
        totalData:{},
        storeName:'',
        type:1,    //1 出币量  2出奖率
        dateType:0,   //0 日  1周  2月
        storeId:'',
        deviceType:1,
        fromDate:'',
        toDate:'',
        deviceModel:'',
        originalData:{},
        deviceList:[
          {
            "deviceName":"芭比机-2号机",
            "deviceCoin":4558,
            "deviceNo":"BBJ",
            "deviceId":759,
            "deviceState":2,
            "awardMoney":"18.09",
            "award":"3655555.17",
            "awardRate":"28.22",
            "awardNumber":126
          },

        ],
      }
    },
    created:function() {

      if(window.plus){
       console.log(true)

      }else{
        console.log("false");
      }
      mui.plusReady(function(){
        vm.receiveParams()
      });
    },
    mounted: function() {
      this.initCharts()
    },
    methods: {
      receiveParams: function() {
        var sf = plus.webview.currentWebview();
        this.currentShopObj = sf.currentShopObj;
        this.storeId = sf.storeId;
        this.deviceType=sf.deviceType;
        this.deviceModel=sf.deviceModel;
        this.fromDate=sf.fromDate;
        this.toDate=sf.toDate;
        this.storeName=sf.storeName;
        this.dateType=sf.dateType
//          this.loadData();
      },
      loadData:function() {
        var vm = this;
        console.log(JSON.stringify({
          fromDate:new Date(vm.fromDate).format('yyyyMMdd'),
          toDate:new Date(vm.toDate).format('yyyyMMdd'),
          storeId:vm.storeId,
          deviceType:vm.deviceType,
          deviceNo:vm.deviceModel,
          type:vm.dateType,
          checkType:1,  //1  投币
        }))
        config.ajax({
          url:'/Whreport/checkDeviceModel',
          data:{
            fromDate:new Date(vm.fromDate).format('yyyyMMdd'),
            toDate:new Date(vm.toDate).format('yyyyMMdd'),
            storeId:vm.storeId,
            deviceType:vm.deviceType,
            deviceNo:vm.deviceModel,
            type:vm.dateType,
            checkType:1,  //1  投币
          },
          success: function(res){
            console.log(JSON.stringify(res))
            if(res.result ===1){
              vm.originalData=res.data;
              vm.changeChart();
              vm.deviceList=res.data.device;
            }else {
              mui.toast(res.errormsg)
            }
          },
          error:function(res){
            mui.toast(res.errormsg)
          }
        })
      },
      initCharts: function() {
        var vm = this;
        var lineChart = echarts.init(document.getElementById('lineChart'));
        lineChart.setOption(vm.lineOptions)
      },
      toPage:function(index){
        var  vm=this;
        mui.openWindow({
          url: 'deviceDetail.html',
          id: 'deviceDetail',
          styles: {
            titleNView: {
              titleText:vm.storeName,
              titleColor: "#FFFFFF",
              titleSize: "17px",
              backgroundColor: "#FF6800",
              autoBackButton: true,
              buttons: [{
                fontWeight: 'normal',
                fontSize: '18px',
                float: 'right',
                fontSrc: "_www/fonts/iconfont.ttf", //wap2app内置字体文件
                text: "\ue602",
                onclick: function() {
                  var allPage = plus.webview.all()
                  var nowPage = plus.webview.getWebviewById('index')
                  for(var i = 0; i < allPage.length; i++) {
                    if(allPage[i].getURL() !== nowPage.getURL()) {
                      plus.webview.close(allPage[i]);
                    }
                  }
                }
              }],
              splitLine: {
                color: "#CCCCCC",
                height: "1px"
              }
            }
          },
          createNew:true,
          extras: {
            storeName:vm.storeName,
            fromDate: vm.fromDate,
            toDate: vm.toDate,
            storeId: vm.storeId,
            deviceType: vm.deviceType,
            deviceNo: vm.deviceList[index].deviceNo,
            deviceId: vm.deviceList[index].deviceId,
            dateType:vm.dateType ,   //0 日 1 周 2 月
            deviceName:vm.deviceList[index].deviceName,
            awardMoney:vm.deviceList[index].awardMoney,
            type:vm.deviceType ===1 ? 4 : vm.deviceType ===2 ? 2 : 1,
            checkType:1
          }
        });



      },
      choose:function(type){
        this.type=type;
        this.changeChart()
      },
//收币和出奖切换 数据变换fun
      changeChart:function(){
        var mapData='',vm=this;
        if(vm.type ===1){
          mapData= JSON.parse(JSON.stringify(vm.originalData.getCoinsMap))
        }else if(vm.type ===2){
          mapData= JSON.parse(JSON.stringify(vm.originalData.trendMap))
        }
        vm.lineOptions.series[0].data=[],vm.lineOptions.series[1].data=[],vm.lineOptions.xAxis[0].data=[];
        var max=0, storeMax=0,deviceMax=0;
        var timeValue=''
        mapData.forEach(function(item,index){
          if(vm.dateType ===0){
            timeValue='近30天平均'
            item.day=(item.day+'').replace(/^(\d{4})(\d{2})(\d{2})$/, "$3")+'日';
          }if(vm.dateType ===1){
            timeValue='近12周平均'
            item.day=item.day+'周'
          }if(vm.dateType ===2){
            timeValue='近12个月平均'
            item.day=(item.day+'').replace(/^(\d{4})(\d{2})$/, "$2")+'月';
          };
          vm.lineOptions.series[0].data.push(item.device);
          vm.lineOptions.series[1].data.push(item.store);
          vm.lineOptions.xAxis[0].data.push(item.day);
          if( Number(item.device)  > deviceMax){
            deviceMax=Number(item.device)
          }
          if(Number(item.store) > storeMax){
            storeMax=Number(item.store)
          }
        });
        if(storeMax > deviceMax){
          max =storeMax
        }else{
          max =deviceMax
        }

        if(vm.deviceType ===1){
          vm.lineOptions.title.subtext=timeValue+(vm.type ===1? '单台收G币' : '返奖率' );
          vm.lineOptions.yAxis[0].axisLabel.formatter= vm.type === 2 ? '{value}%' : '{value}';
        }else {
          vm.lineOptions.title.subtext=timeValue+(vm.type ===1? '单台收G币' : '出票率' );
        };
        vm.lineOptions.legend.data[0]=vm.originalData.series;
        vm.lineOptions.series[0].name=vm.originalData.series;
        max= parseInt(max/10)*10;
        if(vm.type ===1){
          vm.lineOptions.series[0].itemStyle.normal.color='#4472C4'
          vm.lineOptions.series[0].itemStyle.normal.lineStyle.color='#4472C4'
          vm.lineOptions.series[0].type='bar' ;
          vm.lineOptions.yAxis[0].max=max > 10 ? (max+100) : 100;
        }else{
          vm.lineOptions.series[0].type='line' ;
          vm.lineOptions.series[0].itemStyle.normal.color='#a3d609'
          vm.lineOptions.series[0].itemStyle.normal.lineStyle.color='#a3d609'
          vm.lineOptions.yAxis[0].max=max > 10 ? (max+10) : 100;
        }


        vm.initCharts()
      },
    },
    watch: {
      fromDate: function() {
        this.loadData()
        var vm=this;
        var sf = plus.webview.currentWebview();
        sf.setStyle({
          titleNView: {
            titleText: vm.dateType ===0 ?  vm.toDate : vm.fromDate+'至'+vm.toDate,
            titleSize: "0.22rem",
          }
        });
      }
    }
  })
</script>


</body>
</html>